<template>
  <div class="container-fluid px-0 mx-0" style="background:black">
    <div :class="[onpc?'pparent':'pparent-ph']" v-for="(item, index) of this.infoPlayer" :key=index>
      <el-progress :class="[onpc?'pstatus':'pstatus-ph']" :text-inside="true" :stroke-width="onpc?23:14" :percentage=item.pct :show-text="false" :color=item.color></el-progress>
      <span :class="[onpc?'pstatustext':'pstatustext-ph']">{{item.text}}</span>
    </div>
  </div>
</template>

<script>
/* eslint-disable comma-dangle */
export default {
  data: function () {
    return this.gdata.data
  },
  components: {
    // websocket: websocket
  },
  methods: {
    pinfoValue: function (name, qv, qm) {
      return name + '(' + qv + '/' + qm + ')'
    },
    pinfoValue3: function (name, qv, qe, qm) {
      return name + '(' + qv + '/' + qe + '/' + qm + ')'
    },
    pinfoPct: function (qv, qm) {
      if (qm <= 0) { return 0 }
      var pct = qv * 100 / qm
      if (pct < 0) { pct = 0 } if (pct > 100) { pct = 100 }
      return pct
    },
    getprop: function (name) {
      return this.gdata.getprop(name)
    },
    getpinfo: function (name) {
      let dict = {
        食物: { val: 'food', mxval: 'mxfood', color: 'ForestGreen', class: 'progress-bar bg-success' },
        饮水: { val: 'water', mxval: 'mxwater', color: 'Silver', class: 'progress-bar bg-success' },
        气血: { val: 'kee', efval: 'efkee', mxval: 'mxkee', color: 'Tomato', class: 'progress-bar bg-danger' },
        精神: { val: 'sen', efval: 'efsen', mxval: 'mxsen', color: 'LightGreen', class: 'progress-bar bg-success' },
        内力: { val: 'force', mxval: 'mxforce', color: 'DarkOrange', class: 'progress-bar bg-warning' },
        法力: { val: 'mana', mxval: 'mxmana', color: 'DeepSkyBlue', class: 'progress-bar' },
      }
      let pct = 0
      let text = ''
      if (name === '气血' || name === '精神') {
        pct = this.pinfoPct(this.getprop(dict[name].efval), this.getprop(dict[name].mxval))
        text = this.pinfoValue3(name, this.getprop(dict[name].val), this.getprop(dict[name].efval), this.getprop(dict[name].mxval))
      } else {
        pct = this.pinfoPct(this.getprop(dict[name].val), this.getprop(dict[name].mxval))
        text = this.pinfoValue(name, this.getprop(dict[name].val), this.getprop(dict[name].mxval))
      }
      return {
        pct: pct,
        text: text,
        color: dict[name].color,
      }
    }
  },
  computed: {
    infoPlayer: function () {
      if (this.plogin) {
        return [
          this.getpinfo('食物'),
          this.getpinfo('饮水'),
          this.getpinfo('气血'),
          this.getpinfo('精神'),
          this.getpinfo('内力'),
          this.getpinfo('法力'),
        ]
      } else {
        return []
      }
    }
  }
}
</script>

<style scoped>
.pparent {
  position: relative;
  height: 25px;
  width: 100%;
}
.pparent-ph {
  position: relative;
  height: 15px;
  width: 100%;
}
.pstatus {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 25px;
}
.pstatus-ph {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 15px;
}
.pstatustext {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 25px;
  font-size: 18px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pstatustext-ph {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 15px;
  font-size: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
